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ABSTRACT 



A computer system user interface that includes a 
method of accessing electronic data. The method in- 
cludes displaying on a computer display screen a con- 
trol window that includes a perspective view of a work 
area. The work area includes at least one animated icon 
that is movable from a closed position to a substantial 
continuum of open positions. Moving the icon to an 
open position automatically opens a window on the 
display screen that contains the data to be accessed. 
Closing the icon automatically closes the window. 

15 Oaims, 4 Drawing Sheets 



37 



35 



^ PERSONNa niES 




MARY ABBOn 




JOSEPH BENFIELD 




TERRY CHRISTOPHER 




Bin DENVER 




ANN EDWARDS 




SARAH FISHER 




MANUEL GOMEZ 




MEAGHAN HOLMES 






06/17/2004, EAST Version: 1.4.1 



U.S. Patent Sep. 13, 1994 sheet 1 of 4 



5,347,628 




11 



FIQ. Z 

06/17/2004, EAST Version: 1.4.1 



U.S. Patent Sep. 13, 1994 sheet 2 of 4 



5,347,628 



37 



35 



^ PERSONNEL FILES . 


a 


MARY ABBOn 




JOSEPH BENFIELD 




TERRY CHRISTOPHER 




BILL DENVER 




ANN EDWARDS 




SARAH nSHER 




MANUEL GOMEZ 




MEAGHAN HOLMES 


Q 




FIG, 3 






fEXifl 










• 




10 



FIG. 4 

06/17/2004, EAST Version: 1.4.1 



U.S. Patent Sep. 13, 1994 sheet 3 of 4 



5,347,628 




FIG, 5 




(omCEi ISUPPUESI 



47 

4- 



FIQ. 6 



06/17/2004, EAST Version: 1.4.1 



U.S. Patent sep. 13,1994 sheet 4 of 4 5,347,628 



DRAW CONTROL WINDOW WITH 
OrnCE CONTDCT CONTAINING 
VARIOUS ICONS 




■71 



101 



FIG. 7 



DETERMINE 
CLIPPING REGION 



I 



DETERMINE PERCENT 
OF MAXIMUM 
CUPPING REGION 



I 



SEND MESSAGE 
TO WINDOW HANDLER 
WITH PERCENT 



I 



PERFORM 
CLIPPING OF ICON 



I 



REDRAW ICON AND 
ANY NECESSARY 
BACKGROUND 



-75 



■77 



•79 



■83 



•85 




GET MESSAGE AND 
EXTRACT PERCENT 
FROM MESSAGE DATA 




CREATE WINDOW 



I 



GET DATA ITEMS 
TO BE DISPLAYED 



1 



SIZE THE WINDOW 
ACCORDING 
TO PERCENT 



I 



DISPLAY DATA 
IN THE WINDOW 



91 
-93 

•95 
-97 



06/17/2004, EAST Version: 1.4.1 



5,347,628 

1 2 

pie, a file cabinet or a mail basket, which can contain 
METHOD OF GRAPHICALLY ACCESSING other objects. 

ELECTRONIC DATA Iconographic user interfaces are an improvement 

over the lower level user interfaces. However, pres- 
BACKGROUND OF THE INVENTION 5 ently existing iconogr^hic interfaces do have some 

1 Field of the Invention shortcomings. For example, the operations vAlh the 
The present invention rdatcs generally to user inter- ^^"f completely intuitive. The beginning user 

faces for data processing systems and, more particu- "^1^^ '""^^ "'"^^ff^S help 

lariy, to a methoSTgrfplJS^ accessing dec^S^ wmdows m order to operate the system Also, such 
J X u JZ . 5i*H*xuwiujr au^«»ui5 cic*.uwmv mtcrfaces rcly extensively upon textual material m 

date by the mampulation of animated icons. of puU-down and pop-up menus. User Uteracy 

2 D^cnpbon of the Prior Art ^^^Q^al language support problems stiU exist in 
User mterfaces allow the computer user to mteract or ^^^h user interfaces. 

communicate with the computer system. User inter- ^ further shortcoming of the presently existmg icon- 
faces are typically unplemented with a display screen 15 ographic user interfaces, as well as the menu driven 
and an entry device, such as a keyboard, mouse, light interfaces, b in the number of manipulative steps by the 
pen or the like. The display screen displays information user and getting into and out of the data. If the user 
and data to the user and the user uses the entry device wishes to inspect the contents of a particular fde, the 
to give commands and provide information to the com- user must open the window for that file to display its 
puter system. 20 contents. If, after having looked at the contents of the 

Relatively low level user interfaces are word or char- file, the user wishes not to work with the contents of the 
acter oriented. In such user interfaces, the user is re- file, the user must go to that file's window and p>erfonn 
quired to know or have readily available various com- various non-intuitive closing operations before retum- 
mands and operators in order to work with the system. ing to the main window. 
Su^ low level user interfaces also reouire the user to 25 

ouuu luw icvci uaci iiucim^cs a«u ic^uuc mc uacx lu ^ SUMMARY OF THE UsTVENTION 

know vanous rules of syntax and have some knowledge x^**^^* x^ix^^x^ 
of the structure of the underlying application. Low The present invention provides an aesthetically pleas- 
level user interfaces are not user friendly. ing user interface that intuitively reflects the functions 
Some higher level user interfaces include various ^^eing provided and, through the use of animated icons, 
menus and prompts. Such interfaces provide the user 30 more closely simulates the functions being shown. By 
with limited choices and they ask the user for informa- animating icons of things that open, such as doors, 
tion. Such user interfaces are somewhat automated and drawers, notebooks, and the like, the user will be able to 
they require less skill on the part of the user. However, ^^^^ ^^^^ ^ object represented by the 
such user interfaces are language intensive, so they * glance what is contained in or behind 
require a certain level of Uteracy on the part of the user. -^^^ ^® ^ ^^^^ ^^^^ 
Also, substantial effort and expense are required to ^^^^^^ represented by the icon without need- 
adapt such user interfaces to different national Ian- *° step ^ough menu bars, puUdowns, or other 

commands. The elunination of menus, the ease of back- 
Recently, as more and more people want and need to , °^ ^7 f^^^y ^^^^S ^ 
use the power of the computer in their daily work but ^ usefukess of the user mterface of the present 

do not have the thne to develop the specialized data ^^^^^ "i^^^^ f ^*^P P';^*^^^ 

1-11 J r- ' r X- existinc user mterfaces. The real-time icomc animation 

processmg skills required to define mformation or com- . * r r ! ^ • 7 ST 

. ^ t_-t-i» ' ^ gives a feeune of reality to the mterface, which m- 

mumcation requu^ents, even higher level user mter- ^ j. ^ , * , , , * j 

r „ t. uJ: J i j/^ 1 creases the user s comfort level. Without words, the 

faces have been developed. One such high level user • * _r t_ j j ^t. 1 j -^i. ^ ^j- 

. * -xi- • J J • 45 mterfacecanbeusedaroundthe world without needmg 

mterface presents the user with wmdows and icons. ^ t tt. -lj* -.i.^ ^ * 

, 11 • 1 J L ^ i_ J translation. The ammated icons that cause actions to 
Wmdows usually mdude ? title bar, an action bar, and self-explanatory, which greaUy re- 
a chent area. The tide bar identifies the window. It may ^^^^ ^^^^ manualTor helps, 
also have some standard action are^ that aUow the user g^efly stated, the method of tht present invention 
to nmxmnze or minimize the aze ofthe wmdow and to 50 ^^^^^^ displaying on a computer screen a graphical 
scroll the data withm the wmdow. The action bar hsts a representation of a work area. The work area includes 
set of actions that can be selected, such as style, edit, animated icon that is movable between a 
^t]!^* . P*. ^ ^ ^ closed position and an open position. The icon is posi- 
Themamchentareaofthewindowmaybepopulated tioned in a contextual setting. For example, the icon 
with icons, which are small stylized representations of 55 j^^y a drawer in a perspective view of a desk in an 
the objects with which the user works. By using a office. The method includes manipulating a pointing 
mouse, the user can move the icons around by dragging ^^y[^Q j^^y^ tj^g jcon to an open position. Such 
them. Dragging may be done, for example, by operating movement of the icon automatically displays the con- 
the mouse to point to the icon, holding down one of the tents of the icon on the screen. In the preferred embodi- 
mouse buttons, which effectively grabs the icon, and eo ment, moving the icon automatically opens a window 
moving the mouse around. Dragging one object and on the screen. The data being accessed is displayed in 
laying it on top of another object is one form of direct the data window. The size of the data window is con- 
manipulation. Dragging an object to a printer icon, for trolled by the position of the icon. When the icon is 
example, tells the system to print whatever the object closed, the window is closed. Similarly, when the icon 
represents. Dragging an object to a file cabinet icon 65 is fully opened, the window is at its mj^xinrnm size. If 
instructs the system to file the object. Some icons repre- the user wants simply to see what is in the drawer icon, 
sent individual objects, for example, a document or a the user opens the drawer slightly, which opens the 
telephone. Other icons represent containers, for exam- window slighdy so that the user can look at the data. If 
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the user is finished or does not wish to work with the Movement of drawer 17 to the partially opened posi- 
data in the drawer, the user simply closes the drawer tion has caused a window 35 to be displayed in a par- 
and the data window disappears. tially open position on display screen 11. Window 35 

BRIEF DESOUmnON OF TOE DRAWINGS , represents the contents of 

5 drawer 17. Drawer 17 contams personnel files, as 

FIG. 1 is a pictorial representation of a computer shown by the label bar 37 in window 35. Label bar 37 is 
screen showing all animated icons of the present inven- followed by a list of the files contained in drawer 17. 
tion in their closed positions. If the user wishes to work with one of the files in 

FIG. 2 is a pictorial representation of a computer drawer 17, he or she can pull the drawer open until the 
screen showing one of the animated icons of the present 10 file that he or she is interested in appears in window 35, 
invention in a partially opened position. as shown in FIG. 3. Since the "electronic office" of the 

FIG. 3 is a pictorial representation of a computer present invention allows a user to place more files in a 
screen with an animated icon of the present invention in drawer than could be placed in a real drawer, window 
its fully open position. 35 includes a scroll bar 39 that enables the user to scroll 

FIG. 4 is a pictorial representation of a computer; 15 the files listed in window 35 when window 35 is fully 
screen showing an alternative embodiment of the pres- opened. The user can move cursor 33 to window 35 to 
cnt invention. select the file of interest When the user is finished look- 

FIG. 5 is pictorial representation of the embodiment ing at the contents of the drawer 35, he or she simply 
of FIG. 4 with a door icon in its fully open position. operates cursor 33 to move drawer 17 to its closed 

FIG. 6 is a pictorial representation of the computer 20 position, as shown in FIG. 1. 
screen of the alternative embodiment after having se- Turning now to FIG, 4, the user has operated cursor 
lected the graphics door. 33 to "open" slightly door 29. As door 29 is pulled to 

FIG. 7 is a flow chart setting forth the implementa- the left, it begins to open, the opening of door 29 causes 
tion of the method of the present invention. a window 41 to be displayed on display screen 11. The 

DESCRIPTION OF THE PREFERRED displayed in window 41 indudes a hallway 43 with 

mIlBOmi^>rr ^^^^ mcludmg an exit door 45. The user can operate 

1 cursor 33 to open exit door 45 to return to the base 

Referring now to the drawings, and first to FIG. 1, a operating system. The user can operate cursor 33 to 
computer display screen is designated generally by the move office door 29 to its fully open position, as shown 
numeral 11. Screen 11 has displayed thereon a control 30 in FIG. 5. When office door 29 is fully open, several 
window 13. In the preferred embodiment of the present doors are displayed in hallway 43 of window 41. Win- 
invention, control window 13 includes a perspective dow 41 includes a scroll bar 47 that enables the user to 
graphical representation of an office. The office of con- "walk" up and down hall 43 to view other doors, 
trol window 13 includes a desk 15 having drawer icons The doors in hallway 43 lead to rooms that contam 
17, and a desktop 19 having thereon various icons such 35 icons that represent other files and applications. For 
as in/out basket icons 21, a calendar icon 23, and the example, the user can move cursor 33 to hallway win- 
like. The office of control window 13 also includes a file dow 41 and select the door 49 to a graphics room. The 
cabinet 25 having drawer icons 27, a door icon 29, and . user makes the selection by placing the head of cursor 
a trash can icon 31. 33 on door 49 and clicking one of the mouse buttons. As 

Control window 13 thus includes a plurality of icons. 40 shown in FIG. 6, after selection of the graphics door. 
However, the icons of the present invention are dis- the scene in control window 13 changes to a perspec- 
played in a contextual environment rather than on a tive view of a graphics room, which includes, for exam- 
"parking lot", as in the prior art. The contextual presen- pie, a file cabinet 51 with drawer icons 53, a drafting 
tation of the icons of the present invention appeals to table icon 55, which might represent a plotter applica- 
the user's intuition. The user, relying on his or her expe- 45 tion, and other application icons. The scene in hallway 
rience with offices in the real world, will feel at home window 41 also changes to include office door 29. The 
with the control window display of the present inven- user can select icons in control window 13 with cursor 
tion without needmg labels or other textual instructions. 33. The user can return to the office control window by 
The user can customize the "office" of the control win- selecting office door 29 and hallway window 41. Such 
dow and can put various data, including ffles, applica- 50 selection would return display screen 11 to the condi- 
tions, etc., in the drawers of his or her choosing. The tion shown in FIG. 5. The user can also exit the pro- 
graphical presentation of the present invention elimi- gram or go to other rooms by selecting the appropriate 
nates the need for national language support. door in hallway window 41 of FIG. 6. 

Display screen 11 also has thereon a cursor 33 that is Referring to FIG. 1, there is shown a flow chart of 
controlled by a mouse (not shown). Mouse operated 55 the software implementation of the animated icons of 
cursors are well known to those skilled in the art. The the present invention. Block 71 includes the steps of 
user can move the mouse around on a surface and cause drawing the control window with office context con- 
the cursor to move about display screen 11. The mouse taining various icons. The animated icons of the present 
includes buttons that enable the user to manipulate and invention may be drawn in alternative ways. One way is 
do other operations with icons on the screen, all as is 60 to take as input a graphics segment for the icon. The 
well known to those skilled m the art. graphics segment would be transformed into a bitmat 

In FIG. 2, the user has selected or "grabbed" drawer representation which could then be BIT BLTed very 
17 with cursor 33 and has "dragged" or "pulled" rapidly onto the background layout. Before BIT 
drawer 17 to a partially open position. The "grabbing" BLTing, the bitmap could be clipped in ways that 
operation is performed by placing the head of the cursor 65 would make it appear to be movable as consecutive 
33 on drawer 17, depressing one of the buttons of the cycles show the icon smoothly moving. The other way 
mouse» and keeping the mouse button depressed while would take as input a bitmap. It would then follow all 
moving the mouse. the procedures outlined above. The weakness of this 
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method or more positively the strength of the graphics 
segment method is that graphic segments are scalable or 
sizable whereas bitmaps are much less so. The graphics 
segment method would thus be much more generic and 
useful in today's world of scalable windows. 3 

After the controlled window has been drawn, the 
input is monitored. As shown at decision block 73, if the 
icon does not move, nothing happens. The icon moves 
if the cursor is on the icon, the mouse button is de- 
pressed, and the mouse is moved. Moving icons is well 
known to those skilled in the art and it is controlled by 
an operating system, such as Presentation Manager. If 
the icon has moved, then, referring to block 75, the 
clipping region of the display is determined. The clip- 
ping region determines the amount of the icon that is 
visible on the display. Referring, for example, to FIGS. 
1 and 3, in FIG. 3, drawer icon 17 is pulled all the way 
open and it is completely visible. In FIG. 1, drawer icon 
17 is closed, but it still exists; most of the drawer is 
covered over by the background of the desk. 

Returning to FIG. 7, after the clipping region has 
been determined, then, as shown in block 77, the per- 
centage of the maximum clipping region is determined. 
After the percentage of the TnAxiTTmni clipping region 
has been determined, as shown in block 79, a message 
with that percent is sent to the window handler pro* 
gram, which is designated generally by the nimieral 81. 

After the message is sent, the program clips the icon 
at block 83 and redraws the icon and any necessary 
background at block 85. After the icon has been re- 
drawn, the program continues to monitor the input. 

The message handler program 81 receives the mes- 
sage and extracts the percent of maximum clipping 
region from the message data at block 87. If, as shown 
at decision block 89, the window is closed, the program 
creates the window, at block 91, and gets the data items 
to be displayed, at block 93. After the window has been 
created and the data items have been fetched, then, as 
shown in block 95, the window is sized according to the ^ 
percent of maximum clipping region. If the window is 
already opened, the program skips over the window 
creation and data item fetching steps. Referring to block 
97, after the window has been sized, the data is dis- 
played in the window. Then, as shown in decision block 45 
99, the window handler program waits until it receives 
another message. The control window animation rou- 
tine, which is designated generally by the numeral 101, 
operates independently of window handler routine 81. 
Animation routine 101 passes messages to window han- 50 
dler program 81. 

The animated icons of the present invention offer 
several advantages of the prior art. One advantage is the 
elimination of the need for pull downs and menu bars in 
the main controlling window. The actions taken on the 55 
animated icons in the control window are reflected both 
in the changing picture in the control window and the 
resulting actions displayed on the main screen. Actions 
are simplified. In the control window, only open, close, 
and drop actions are accomplished. In the main display, 60 
move, arrange or delete work is done. Deleting may be 
accomplished by dragging a file selected in the main 
display into the office and dropping it into the trash can 
icon. When an object b pulled across the boundary 
from the main display to the control window, the object 65 
may be changed to an icon that is sized to fit in the 
window environment. The ability to cross the boundary 
between the two display areas gives the animated con- 



trol window the power and flexibiUty to meet a variety 
of tasks without the need for any words. 

The elimination of pull-down and pop-up menus, the 
ease of '^backing out" of a choice by simply "sliding** an 
icon to its closed position, and the intuitive usefulness of 
the design make the present invention a step beyond 
menu-bar/puU-down oriented interfaces. The real-time 
iconic animation gives a feeling of reality to the inter- 
face, thereby increasing the user's comfort level. With- 
out words, the interface can be used around the world 
without needing translation. The animated icons that 
cause actions to occur in the main window are virtually, 
self-explanatory, thereby greatiy reducing the need for 
tutorials, training manuals, or helps. 

While the invention has been particularly shown and 
described in with reference to a preferred embodiment, 
it will be understood by those skilled in the art that 
various changes in form and detail may be made with- 
out departing from the spirit and scope of the invention. 

What is claimed is: 

1. A method in a data processing system, including a 
display screen and a user operated device, for graphi- 
cally accessing electronic data, which comprises the 
steps of: 

displaying on said screen a graphical representation 
of a work area, said work area including at least 
one icon that is movable in said representation of 
said work area between a closed position and an 
open position; 

operating said device to move said icon to an open 
position; 

automatically opening a window on said screen in 
response to moving said icon to said open position 
while said icon and representation of said work 
area remain visible on said screen; and displaying 
said data in said window. 

2. The method as claimed in claim 1, including the 
steps of: 

operating said device to move said icon to a second 

open position; and 
automatically changing the size of said window in 

response to moving said icon to said second open 

position. 

3. The method as claimed in claim 1, including the 
steps of: 

operating said device to move said icon to said closed 
position; and 

automatically closing said window in response to 
moving said icon to said closed position. 

4. The method as claimed in claim 1, wherem said 
representation of said work area is displayed in a first 
portion of said screen and said window is displayed in a 
second portion of said screen. 

5. A method in a data processing system, including a 
display screen, for graphically accessing electronic 
data, which comprises the steps of: 

displaying on said screen a graphical representation 
of a work area, said work area including at least 
OLe icon that is movable in said work area between 
a closed position and an open position; 

moving said icon to a position; 

displaying on said screen a window while said icon * 
and work area remain visible on said screen, the 
size of said window being related to the position of 
said icon with respect to said closed position; and 

displaying said data in said window. 

6. The method as claimed in claim 5, wherein said 
icon represents a drawer having contents. 
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7. The method as claimed in claim 6, wherein said 
data includes a list of the contents of said drawer. 

8. The method as claimed in claim 5, wherein said 
icon represents a door. ^ 

9. Hie method as claimed in claim 8, wherein said 
data includes a plurality of door icons. 

10. The method as claimed in claim 5, wherein said 
graphical representation of said work area includes a 
perspective view of an office including ofQce furnish- 
ings. 

11. The method as claimed in claim 5, wherein said 
graphical representation is displayed on a first portion 

15 



10 



of said screen and said window is displayed on a second 
portion of said screen. 

12. The method as claimed in claim 5, wherein said 
icon has a fully open position. 

13. The method as claimed in claim 12, wherein when 
said icon is in said fully open position, said window is 
fully open. 

14. The method as claimed in claim 12, wherein when, 
said icon is in said closed position, said window is 
closed. 

15. The method as claimed in claim 12, wherein said 

icon is movable to any intermediate position between 

said closed and fully open positions. 

***** 
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